@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img {
            width: 200px;
            height: 180px;
            border: 1px dashed #d9d9d9;
            display: block;
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        .row{
        	display: -webkit-box;
			display: -webkit-flex;
			display: flex;
        }
        .row .panel-main{
        	-webkit-box-flex: 1;     
			-webkit-flex: 1;    
			flex: 1;
        }
    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 投诉人信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="投诉人：" prop="user_name">
                        <el-input readonly v-model="info.user_name"></el-input>
                    </el-form-item>
                    <el-form-item label="申述时间：" prop="created_at">
                        <el-input readonly v-model="info.created_at"></el-input>
                    </el-form-item>
                    <el-form-item label="申述内容：" prop="content">
                        <el-input readonly type="textarea" rows="5" v-model="info.content"></el-input>
                    </el-form-item>
                    <el-form-item label="申述图片：" prop="images">
                        <img v-for="(images,i) in info.images" :src="images" class="ad-img">
                    </el-form-item>
                </div>
                
                <div class="panel-header"> <div class="panel-title">任务信息 </div> </div>
                	 <div class="panel-main">
                		<el-form-item label="任务标题">
	                        <el-input readonly v-model="info.reward.title"></el-input>
	                    </el-form-item>
	                 </div>   
                <div class="row">
	                <div class="panel-main">
	                    
	                    <el-form-item v-if="info.reward.step1_desc" label="第一步信息：">
	                        <el-input readonly v-model="info.reward.step1_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step1_image" label="第一步图：">
	                        <img :src="info.reward.step1_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.reward.step2_desc" label="第二步信息：">
	                        <el-input readonly v-model="info.reward.step2_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step2_image" label="第二步图：">
	                        <img :src="info.reward.step2_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.reward.step3_desc" label="第三步信息：">
	                        <el-input readonly v-model="info.reward.step3_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step3_image" label="第三步图：">
	                        <img :src="info.reward.step3_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.reward.step4_desc" label="第四步信息：">
	                        <el-input readonly v-model="info.reward.step4_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step4_image" label="第四步图：">
	                        <img :src="info.reward.step4_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.reward.step5_desc" label="第五步信息：">
	                        <el-input readonly v-model="info.reward.step5_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step5_image" label="第五步图：">
	                        <img :src="info.reward.step5_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.reward.step6_desc" label="第六步信息：">
	                        <el-input readonly v-model="info.reward.step6_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.reward.step6_image" label="第六步图：">
	                        <img :src="info.reward.step6_image" class="ad-img">
	                    </el-form-item>
	                   
	                </div>
	                <div class="panel-main">
                    
	                    <el-form-item v-if="info.order_detail.step1_user_desc" label="第一步信息：">
	                        <el-input readonly v-model="info.order_detail.step1_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step1_image" label="第一步图：">
	                        <img :src="info.order_detail.step1_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.order_detail.step2_user_desc" label="第二步信息：">
	                        <el-input readonly v-model="info.order_detail.step2_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step2_image" label="第二步图：">
	                        <img :src="info.order_detail.step2_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.order_detail.step3_user_desc" label="第三步信息：">
	                        <el-input readonly v-model="info.order_detail.step3_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step3_image" label="第三步图：">
	                        <img :src="info.order_detail.step3_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.order_detail.step4_user_desc" label="第四步信息：">
	                        <el-input readonly v-model="info.order_detail.step4_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step4_image" label="第四步图：">
	                        <img :src="info.order_detail.step4_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.order_detail.step5_user_desc" label="第五步信息：">
	                        <el-input readonly v-model="info.order_detail.step5_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step5_image" label="第五步图：">
	                        <img :src="info.order_detail.step5_image" class="ad-img">
	                    </el-form-item>
	                    
	                    <el-form-item v-if="info.order_detail.step6_user_desc" label="第六步信息：">
	                        <el-input readonly v-model="info.order_detail.step1_user_desc"></el-input>
	                    </el-form-item>
	                    <el-form-item v-if="info.order_detail.step6_image" label="第六步图：">
	                        <img :src="info.order_detail.step6_image" class="ad-img">
	                    </el-form-item>
	                   
	                </div>
                </div>
               
                
                
                
                <div class="panel-header"> <div class="panel-title"> 回复信息 </div> </div>
                <div class="panel-main">
                	 <el-form-item label="状态：">
                            <el-radio-group v-model="form.status">

                                <el-radio :label="2" border>通过</el-radio>
                                <el-radio :label="3" border>驳回</el-radio> 
                                                                 
                            </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item :rules="[{ max: 100, message: '回复内容的长度不能超过200个字', trigger: 'blur' }]" label="回复内容：">
                       
                        <el-input type="textarea" rows="5" v-model="form.remark"></el-input>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button v-if="status == 1" type="primary" @click="update()">确 定</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        info: {!! $info !!},
                        status: 1,
                        form: {}
                    }
                },
                created() {
                    let that = this;
                    if(this.info.status>1){
                   		 this.status = 0
                    }
                   
                    this.form = this.info
                           
                },
                methods: {
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.info._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                let that = this;
							    if(this.form.status == 1){
							    	window.history.go(-1);
							    	return;
								}else if(this.form.status == 3){									
									if(!this.form.remark){
										alert("请填写驳回理由");
										return;		
									}
									
								}else{

								}
                                
                                $.post("{{ route('admin.feedback.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
